<template>
  <div>
    <div class="app-container bor m-20">
      <div class="top">
        <span class="line" />
        {{ !isAdd ? "新增仪器" : "修改仪器" }}
      </div>
      <div style="margin: 0 100px">
        <div class="bor mb-20">
          <div class="part">
            <div class="title">
              <span class="high" />
              仪器基本信息
            </div>
          </div>
          <div>
            <el-form ref="form" style="padding-left: 30px" :model="form">
              <!-- 仪器名称，仪器编号，仪器型号，仪器类别，仪器厂家，仪器ip，备注 -->
              <el-row>
                <el-col :span="8">
                  <el-form-item
                    label="仪器名称"
                    prop="instrumentName"
                    :rules="{
                      required: true,
                      message: '仪器名称不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model="form.instrumentName"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="仪器编号"
                    prop="instrumentSn"
                    :rules="{
                      required: true,
                      message: '仪器编号不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model="form.instrumentSn"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="仪器型号"
                    prop="instrumentMn"
                    :rules="{
                      required: true,
                      message: '仪器型号不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model="form.instrumentMn"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item
                    label="仪器类别"
                    prop="instrumentType"
                    :rules="{
                      required: true,
                      message: '仪器类别不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-select
                      v-model="form.instrumentType"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :label="item.dictName"
                        :value="item.dictType"
                      />
                      <!-- <el-option label="电压采集2" value="beijing"></el-option> -->
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item
                    label="仪器ip"
                    prop="instrumentIp"
                    :rules="{
                      required: true,
                      message: '仪器ip不能为空',
                      trigger: 'blur',
                    }"
                  >
                    <el-input
                      v-model="form.instrumentIp"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="仪器厂家">
                    <el-input
                      v-model="form.instrumentFactory"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="仪器端口">
                    <el-input
                      v-model="form.instrumentPort"
                      placeholder="请输入"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input v-model="form.remark" placeholder="请输入" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
        <div class="bor">
          <div class="search flex-js part">
            <div class="title">
              <span class="high" />
              信号通道口
            </div>
          </div>
          <div class="search m-20">
            <div class="flex-js" />

            <el-table
              v-loading="listLoading"
              :data="form.MachineChannelList"
              element-loading-background="rgba(0, 0, 0, 0.8)"
              element-loading-text="加载中"
              border
              fit
              highlight-current-row
            >
              <el-table-column label="通道号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.channelSn }}</span>
                </template>
              </el-table-column>
              <el-table-column label="通道名称">
                <template slot-scope="scope">
                  {{ scope.row.channelName }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <el-button class="confirm" type="primary" @click="submit">提交</el-button>
      <el-button class="cancel" @click="$router.go(-1)">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getMachineDesc } from "@/api/table";
import { getInstrumentOperateType } from "@/api/dict";
import { addMachine, editMachine } from "@/api/form";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      form: {},
      list: null,
      isAdd: false,
      listLoading: false,
      options: [],
    };
  },
  created() {
    this.fetchData();
    this.isAdd = this.$route?.query?.id;
  },
  methods: {
    fetchData() {
      getInstrumentOperateType().then((res) => {
        console.log(res);
        this.options = res.data;
      });
      if (this.$route.query.id) {
        this.listLoading = true;
        getMachineDesc({ instrumentId: this.$route.query.id }).then((res) => {
          this.form = res.data;
          if (this.form.MachineChannelList == null) {
            this.form.MachineChannelList = [];
          }
          this.listLoading = false;
          console.log(this.form);
          // this.list = res.rows;
        });
      }
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            editMachine(this.form).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.$router.go(-1);
              }
            });
          } else {
            addMachine(this.form).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.$router.go(-1);
              }
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.white {
  color: white;
}
::v-deep {
  .el-form-item__label {
    color: white;
  }
}
.el-input,
.el-select {
  width: 90%;
}
.app-container {
  padding-top: 0px;
  padding-left: 0 !important;
  padding-bottom: 40px;
}
.top {
  padding-top: -20px;
  color: white;
  text-align: left;
  height: 40px;
  padding-left: 10px;
  line-height: 40px;
  margin-bottom: 20px;
  background: rgb(17, 91, 122);
}
.title {
  color: white;
  background: url("../../../assets/img/highlight.svg");
  background-size: 100% 100%;
  width: 120px;
  height: 32px;
  padding-left: 20px;
  line-height: 32px;
  font-size: 14px;
}
.part {
  background: rgba(26, 57, 78, 0.6);
  height: 52px;
  margin-bottom: 20px;
  .el-form {
    margin-top: 8px;
  }
}
.bor {
  border: 0.5px solid rgb(1, 190, 249);
  .el-table {
    width: 100%;
  }
}
.m-20 {
  margin: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
